<template>
  <div class="question-component">
    <!-- 题目内容 -->
    <div class="question-content">
      <div class="quesition-list">
        <askStatus :is-analysis="isAnalysis" :is-correct="correct" />
        <div class="question-title">
          <span class="question-type">题干：</span>
          {{ question.title }}
        </div>
      </div>

      <!-- 选项列表 -->
      <div class="radio-group" :class="{ 'radio-group-disabled': isAnalysis }" @click="handleAnswerSelect">
        <div v-for="(option, index) in question.options" :key="option.value" class="option-item" :class="{
          'radio-ask': !isAnalysis && option.value == selectedAnswer,//正常界面
          'radio-correct': isAnalysis && index == 0,
          'radio-wrong': isAnalysis && index == 1,
          'radio-selected': isAnalysis && index == 2,
        }" @click="selectedAnswer = option.value">
          <div class="radio-boxs">
            <span class="radio-icon"></span>
          </div>
          <span class="radio-label">{{ option.label }}</span>
        </div>
      </div>
    </div>
    <div class="header-top bottom">
              <div class="c-bottom">
                提示语占位符
              </div>
            </div>
  </div>
</template>

<script setup>
import askStatus from '../askStatus.vue'
// 01 Verbal-单选题    CR题
// 01 PS-单选    PS题
// 01 DI-DS-单选题    DS题
// 01 PS-单选    PS题
// 01 EA-SC     EA-SC





import { ref, defineProps, defineEmits } from 'vue';

// const selectCurrent=ref(
// 定义事件
const emit = defineEmits(['answer-selected'])

// 定义组件属性
const props = defineProps({
  question: {
    type: Object,
    required: true
  },
  correct:{
    type:Boolean,
    default:true
  },
  isAnalysis: {
    type: Boolean,
    default: false
  }
});

// 定义选中的答案
const selectedAnswer = ref(props.question.selectValue);

// 处理答案选择的函数
const handleAnswerSelect = () => {
  if (!props.isAnalysis) {
    emit('answer-selected', selectedAnswer.value);
  }
};
</script>

<style scoped lang="scss">
.question-component {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
}

// Radio group styles
.radio-group {
  display: block;

  &.radio-group-disabled {
    // opacity: 0.6;
    pointer-events: none;
  }
}

.option-item {
  display: flex;
  align-items: center;
  // margin: 12px 0;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f7fa;
  }

  &.radio-correct {
    .radio-boxs {
      border-color: #1E8FDA;
    }

    .radio-icon {
      border-color: #1E8FDA;
      background-color: #1E8FDA;
    }
  }

  &.radio-wrong {
    .radio-boxs {
      border-color: #E52121;
    }

    .radio-icon {
      border-color: #E52121;
      background-color: #E52121;
    }
  }

  &.radio-ask {
    .radio-boxs {
      border-color: #126983;
    }

    .radio-icon {
      border-color: #126983;
      background-color: #126983;
    }
  }

  &.radio-selected {
    .radio-boxs {
      border-color: rgba(30, 143, 218, .4);
    }

    .radio-icon {
      border-color: rgba(30, 143, 218, .4);
      background-color: rgba(30, 143, 218, .4);
    }
  }
}

.radio-boxs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;

  .radio-icon {
    width: 16px;
    display: block;
    height: 16px;
    // margin-right: 8px;
    border: 2px solid #FFFF;
    border-radius: 50%;
    transition: all 0.3s;
  }
}


.radio-label {
  font-size: 14px;
}

.question-title {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.question-type {
  font-weight: bold;
  color: #333;
}

/* Radio 样式调整 */
:deep(.el-radio) {
  width: 100%;
  margin-right: 0;
}

:deep(.el-radio__label) {
  white-space: normal; // 标签文本换行
}

/* 新增的 Radio 状态样式 */
.radio-correct {

  // background-color: #1E8FDA; /* 正确答案的背景色 */
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #1E8FDA;
    background-color: #1E8FDA;
  }
}

.radio-wrong {

  // background-color: #E52121; /* 错误答案的背景色 */
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #E52121;
    background-color: #E52121;
  }
}

.radio-selected {

  // background-color: #1E8FDA; /* 用户选择的背景色 */
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #1E8FDA;
    background-color: #1E8FDA;
  }
}

.radio-disabled {
  opacity: 0.6;
  /* 禁用状态的透明度 */
}

.quesition-list {
  display: flex;



}
.header-top {
      background-color: #D3D3D3;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-bottom: 20px;
      &.bottom{
        width:100%;
        background-color: #fff;
        .c-bottom{
          width:200px;
          background-color: #D3D3D3;
          height: 100%;
          display: flex;
      align-items: center;
      justify-content: center;
        }
      }
    }
</style>